<template>
    <div style="width: 100%;height:100%;">
        <div id="lottie-container" style="width: 200px; height: 200px;position: absolute;top:80px;left:400px;"></div>
    </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import lottie from 'lottie-web';

onMounted(() => {
    // 加载 Lottie 动画
    const container = document.getElementById('lottie-container');
    if (container) {
        lottie.loadAnimation({
            container: container, // 动画容器
            renderer: 'svg',      // 渲染方式（svg/canvas/html）
            loop: true,           // 是否循环播放
            autoplay: true,      // 是否自动播放
            // path: 'https://assets2.lottiefiles.com/datafiles/DlRM2jtACyr4IX1u6l5rqtW1QWZKLCkNoBIXWeyH/loading.json' 
            path: 'https://assets2.lottiefiles.com/packages/lf20_szlepvdh.json'
            // path: 'https://assets4.lottiefiles.com/packages/lf20_x62chJ.json'
            // path: 'https://assets2.lottiefiles.com/datafiles/tvGrhGYaLS0VjreZ1oqQpeFYPn4xPO625FsUAsp8/simple loading/simple.json'
        });
    } 
});
// 暂停动画：
// const animation = lottie.loadAnimation({ ... });
// animation.pause();
// 调整播放速度：
// animation.setSpeed(2); // 2 倍速播放
// 监听动画事件：
// animation.addEventListener('complete', () => {
//     console.log('动画播放完成');
// });
</script>

<style scoped>

</style>